<template>
  <div>
    <el-divider
      content-position="left"
    ><h3>
      同步配置
      <el-switch
        v-model="data.syncStatus"
        name="cdc"
        @change="(v) => handelcdcSwitchChange(v, 'sync')"
      /></h3></el-divider>
    <el-form
      v-if="data.syncStatus"
      ref="form"
      :inline="true"
      :rules="rules"
      :model="data"
      style="width: 80%"
    >
      <el-form-item
        label="同步配置"
        class="custom-form-item"
        prop="cdcId"
        label-width="120px"
      >
        <el-select
          v-model="data.cdcId"
          placeholder="请选择同步配置模板"
          style="width: 95%"
          @change="handleSelectionChange"
        >
          <el-option
            v-for="item in cdcTemplateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-row :gutter="24">
        <el-col v-for="item in dictOptions" :key="item.value" :span="12">
          <el-form-item
            label-width="120px"
            :label="item.label"
            class="custom-form-item"
            :prop="item.value"
          >
            <el-input
              v-model="data.syncConf[item.value]"
              :disabled="randomList.includes(item.value)"
              :placeholder="`请填写${item.label}`"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { convertToCamelCase } from '@/utils/index.js'
import { listSyncConf } from '@/api/console/syncConf'

import Vue from 'vue'

export default {
  name: 'Streaming',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      randomList: ['databaseServerId', 'topicPrefix', 'name'],
      rules: {
        cdcId: [
          {
            required: true,
            message: `请选择配置`,
            trigger: 'blur'
          }
        ]
      },
      cdcTemplateList: [],
      dictOptions: []
    }
  },
  created() {
    const { syncStatus } = this.$props.data
    if (syncStatus == undefined) {
      Vue.set(this.$props.data, 'syncStatus', false)
      Vue.set(this.$props.data, 'syncConf', {})
    }
  },
  async mounted() {
    const { syncConf } = this.$props.data

    if (syncConf) {
      this.gainSyncConf()
    }
    const res = await listSyncConf({
      startNum: 0,
      pgSize: 999
    })
    this.cdcTemplateList = res.rows
  },
  methods: {
    handelcdcSwitchChange(v) {
      if (!v) {
        this.$props.data[`syncConf`] = {}
      }
    },
    handleSelectionChange(v) {
      let findItem = this.cdcTemplateList.find((f) => f.id == v)
      this.dictOptions = []
      this.$props.data.syncConf = {}
      try {
        findItem = JSON.parse(findItem.conf) || {}
      } catch (error) {
        this.$message.error('配置解析失败')
      }
      Object.keys(findItem).forEach((f) => {
        Vue.set(this.$props.data.syncConf, convertToCamelCase(f), findItem[f])
      })
      this.gainSyncConf()
      this.randomList.forEach((f) => {
        this.$props.data.syncConf[f] = `${this.$props.data.syncConf[f]}${String(
          new Date().getTime()
        ).slice(5, 13)}`
      })
    },
    gainSyncConf() {
      this.getDicts('conf_sync_dict').then((res) => {
        res.data.forEach((item) => {
          if (this.$props.data.syncConf[convertToCamelCase(item.dictValue)]) {
            this.dictOptions.push({
              label: item.dictLabel,
              value: convertToCamelCase(item.dictValue)
            })
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
h3 {
  font-weight: 600;
}
</style>
